<template>
  <Drawer :visible="visible" title="用户详情" size="large" @close="handleCancel">
    <template #footer>
      <Button class="float-right" key="back" @click="handleCancel">返回</Button>
    </template>
    <Descriptions bordered class="mb-10px w-full">
      <DescriptionsItem :span="3" label="ID">{{ form.id }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="OneAccess用户ID">{{ form.id }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="用户名">{{ form.userName }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="名称">{{ form.name }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="邮箱">{{ form.email }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="组织名称">{{ form.orgName }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="状态">{{ form.status }}</DescriptionsItem>
      <DescriptionsItem :span="3" label="电话">{{ form.phone }}</DescriptionsItem>
    </Descriptions>
    <Table
      class="w-full !important"
      :bordered="true"
      :dataSource="tableInfo"
      :columns="columns"
      :pagination="false"
    >
    </Table>
  </Drawer>
</template>
<script setup lang="ts">
import { ref, defineProps, reactive, watch } from 'vue';
import { Drawer, Table, Button, Descriptions, DescriptionsItem } from 'ant-design-vue';
import { authSaaSUser, viewSaaSUser } from '/@/api/organization-mgmt/user';
let props = defineProps({
  visible: Boolean,
  user: Object,
});
const columns = [
  {
    title: '应用名称',
    dataIndex: 'name',
    width: 200,
    key: 'name',
  },
  {
    title: '套餐类型',
    dataIndex: 'type',
    width: 200,
    key: 'type',
  },
  {
    title: '角色名称',
    dataIndex: 'roleNamesStr',
    width: 200,
    key: 'roleNamesStr',
  },
];
interface User {
  id: string;
  userName: string;
  name: string;
  email: string;
  phone: string;
  orgId: string;
  orgName: string;
  status: number;
}
let visible = ref(props.visible);
let propsRef = reactive(props);
const form = ref<Partial<User>>({});
const tableInfo = ref();
const emit = defineEmits(['close']);

const handleCancel = function () {
  emit('close', 'close');
};
async function getUser(id: string) {
  form.value = await viewSaaSUser({ userId: id });
  tableInfo.value = await authSaaSUser({ userId: id });
}
watch(propsRef, (newValue) => {
  visible.value = newValue.visible;
  form.value.id = newValue.user?.id;
  if (newValue.visible) {
    getUser(newValue.user?.id);
  }
});
</script>
